<template name='imgsBanner'>
	<view class="imgsBannerBox">
		<swiper circular=true class="imgsBanner_swiper" :autoplay='autoplay' :interval='Number(interval)' :duration='Number(duration)'
			:current='comCurrentImg' @change='changCurrent'>
			<swiper-item v-for="(item,index) in imgList" :key='index'>
				<image :src="getItemUrl(item)" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 图片位置 -->
		<view class="imgLength">{{(comCurrentImg+1)+'/'+(imgList.length)}}</view>
		<scroll-view scroll-x="true" class="scrollImgBox" :scroll-left='scrollImgList' scroll-with-animation
			v-if="isShowSmallImgs">
			<view class="scrollImgList">
				<image :src="getItemUrl(item)" mode="aspectFill" v-for="(item,index) in imgList" :key='index'
					:class="comCurrentImg==index?'activeImageItem':''" @click="onClickImg(index)" :id="'item'+index">
				</image>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		name:'imgsBanner-tag',
		props:{
			imgList:{
				type:Array,
				default:()=>[]
			},
			currentImg:{
				type:Number,
				default:0
			},
			isShowSmallImgs:{
				type:Boolean,
				default:true
			},
			customizeDisplayField:{
				type:String,
				default:''
			},
			autoplay:{
				type:Boolean,
				default:false
			},
			interval:{
				type:[Number,String],
				default:2000
			},
			duration:{
				type:[Number,String],
				default:500
			},
		},
		data() {
			return {
				comCurrentImg: 0,
				scrollImgList: 0,
				imgLeftList: [],
				autoplayTimer: null
			};
		},
		created() {
			this.comCurrentImg = this.currentImg;
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.imgList.forEach((i, v) => {
						let info = uni.createSelectorQuery().in(this);
						info.select("#item" + v).boundingClientRect((res) => {
							// 小图的偏移量处理
						}).exec()
					});
					this.imgListScroll(this.comCurrentImg);
					this.startAutoplay();
				}
			});
		},
		beforeDestroy() {
			this.clearAutoplay();
		},
		methods: {
			getItemUrl(item) {
				let { customizeDisplayField } = this;
				if (customizeDisplayField) {
					return customizeDisplayField.split('.').reduce((v, k) => v[k], item);
				} else {
					return item;
				}
			},
			onClickImg(index) {
				this.comCurrentImg = index;
				this.imgListScroll(index);
				this.restartAutoplay();
			},
			changCurrent(e) {
				let newIndex = e.target.current;
				this.comCurrentImg = newIndex;
				this.imgListScroll(newIndex);
				this.$emit('change', this.imgList[newIndex], newIndex);
				this.restartAutoplay();
			},
			imgListScroll(index) {
				if (index >= 2) {
					this.scrollImgList = this.imgLeftList[index - 2];
				} else {
					this.scrollImgList = 0;
				}
			},
			startAutoplay() {
				this.clearAutoplay();
				if (this.autoplay && this.imgList.length > 1) {
					this.autoplayTimer = setInterval(() => {
						let nextIndex = this.comCurrentImg + 1;
						if (nextIndex >= this.imgList.length) {
							nextIndex = 0;
						}
						this.comCurrentImg = nextIndex;
						this.imgListScroll(nextIndex);
						this.$emit('change', this.imgList[nextIndex], nextIndex);
					}, this.interval);
				}
			},
			clearAutoplay() {
				if (this.autoplayTimer) {
					clearInterval(this.autoplayTimer);
					this.autoplayTimer = null;
				}
			},
			restartAutoplay() {
				this.clearAutoplay();
				this.startAutoplay();
			}
		}
	}
</script>




<style lang="less" scoped>
	.imgsBannerBox {
		position: relative;
	}

	.imgLength {
		position: absolute;
		top: 430rpx;
		right: 24rpx;
		background: rgba(0, 0, 0, 0.34);
		padding: 0 12rpx;
		line-height: 32rpx;
		font-size: 22rpx;
		border-radius: 16rpx;
		color: #fff;
	}

	.imgsBanner_swiper {
		width: 750rpx;
		height: 500rpx; // 将高度缩小到 500rpx
		margin-bottom: 24rpx;

		swiper-item {
			width: 750rpx;
			height: 100%;

			image {
				width: 750rpx;
				height: 500rpx; // 图片高度也设置为 500rpx 以适应新的轮播高度
			}
		}
	}

	.scrollImgBox {
		.scrollImgList {
			white-space: nowrap;

			image {
				width: 132rpx;
				height: 132rpx;
				margin-right: 16rpx;
				display: inline-block;
				border: 6rpx solid #fff;
			}

			image:last-child {
				margin-right: 0;
			}

			.activeImageItem {
				border: 6rpx solid #F57341;
			}
		}
	}
</style>
